/**
 * 查看图片业务共通js
 *
 *   create by:zhengxb 2019.9.22
 *
 * */
var MY_SHOW_IMG = (function () {

    /**
     * 图片查看处理模态框
     *
     * @param institutionId
     * @param reportImgId
     * @param $tbody
     *
     * */
    let clickNum;
    let urlImgSplit;
    let img;

    function showImg(urlImg, flg) {
        clickNum = 0;
        img = new Image();
        urlImgSplit = urlImg.split(",");
        //给body添加弹出层的html
        let e = "";
        e += '<div class="mask-layer">' +
            '<div class="mask-layer-black"></div>' +
            '<div class="mask-layer-container">' +
            '<div class="mask-layer-container-operate">' +
            '<button class="mask-out btn-default-styles">放大</button>' +
            '<button class="mask-in btn-default-styles">缩小</button>' +
            '<button class="mask-clockwise btn-default-styles">顺旋转</button>' +
            '<button class="mask-counterclockwise btn-default-styles">逆旋转</button>';
        if (flg == 1) {
            e += '<button class="mask-up btn-default-styles">上张</button>' +
                '<button class="mask-down btn-default-styles">下张</button>';
        }

        e += '<button class="mask-close btn-default-styles">关闭</button>' +
            ' </div>' +
            ' <div class="mask-layer-imgbox auto-img-center"></div>' +
            '  </div>' +
            '</div>';

        $("body").append(e);
        var spin_n = 0;
        $(".mask-layer-imgbox").empty();
        spin_n = 0;
        $(".mask-layer-imgbox").append('<p><img id="showPicImg" src="' + urlImgSplit[clickNum] + '" alt=""></p>');

        $(".mask-layer").show();
        //图片居中显示
        var box_width = $(".auto-img-center").width(); //图片盒子宽度
        var box_height = $(".auto-img-center").height();//图片高度高度
        var initial_width = 0;//初始图片宽度
        var initial_height = 0;//初始图片高度
        img.src = urlImgSplit[clickNum];
        // 如果图片被缓存，则直接返回缓存数据
        if (img.complete) {
            initial_width = img.width;
            initial_height = img.height;
            if (initial_width > initial_height) {
                $(".auto-img-center img").css("width", box_width);
                var last_imgHeight = $(".auto-img-center img").height();
                $(".auto-img-center img").css("margin-top", -(last_imgHeight - box_height) / 2);
            } else {
                $(".auto-img-center img").css("height", box_height);
                var last_imgWidth = $(".auto-img-center img").width();
                $(".auto-img-center img").css("margin-left", -(last_imgWidth - box_width) / 2);
            }
        } else {
            img.onload = function () {
                initial_width = img.width;
                initial_height = img.height;
                if (initial_width > initial_height) {
                    $(".auto-img-center img").css("width", box_width);
                    var last_imgHeight = $(".auto-img-center img").height();
                    $(".auto-img-center img").css("margin-top", -(last_imgHeight - box_height) / 2);
                } else {
                    $(".auto-img-center img").css("height", box_height);
                    var last_imgWidth = $(".auto-img-center img").width();
                    $(".auto-img-center img").css("margin-left", -(last_imgWidth - box_width) / 2);
                }
            }
        }

        //图片拖拽
        var $div_img = $(".mask-layer-imgbox p");
        //绑定鼠标左键按住事件
        $div_img.bind("mousedown", function (event) {
            event.preventDefault && event.preventDefault(); //去掉图片拖动响应
            //获取需要拖动节点的坐标
            var offset_x = $(this)[0].offsetLeft;//x坐标
            var offset_y = $(this)[0].offsetTop;//y坐标
            //获取当前鼠标的坐标
            var mouse_x = event.pageX;
            var mouse_y = event.pageY;
            //绑定拖动事件
            //由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素
            $(".mask-layer-imgbox").bind("mousemove", function (ev) {
                // 计算鼠标移动了的位置
                var _x = ev.pageX - mouse_x;
                var _y = ev.pageY - mouse_y;
                //设置移动后的元素坐标
                var now_x = (offset_x + _x) + "px";
                var now_y = (offset_y + _y) + "px";
                //改变目标元素的位置
                $div_img.css({
                    top: now_y,
                    left: now_x
                });
            });
        });
        //当鼠标左键松开，接触事件绑定
        $(".mask-layer-imgbox").bind("mouseup", function () {
            $(this).unbind("mousemove");
        });
        //缩放 放大
        var zoom_n = 1;
        $(".mask-out").click(function () {
            zoom_n += 0.1;
            $(".mask-layer-imgbox img").css({
                "transform": "scale(" + zoom_n + ")",
                "-moz-transform": "scale(" + zoom_n + ")",
                "-ms-transform": "scale(" + zoom_n + ")",
                "-o-transform": "scale(" + zoom_n + ")",
                "-webkit-transform": "scale(" + zoom_n + ")"
            });
        });
        //缩放 缩小
        $(".mask-in").click(function () {
            zoom_n -= 0.1;
            zoom_n = zoom_n <= 0.1 ? 0.1 : zoom_n;
            $(".mask-layer-imgbox img").css({
                "transform": "scale(" + zoom_n + ")",
                "-moz-transform": "scale(" + zoom_n + ")",
                "-ms-transform": "scale(" + zoom_n + ")",
                "-o-transform": "scale(" + zoom_n + ")",
                "-webkit-transform": "scale(" + zoom_n + ")"
            });
        });
        //旋转
        $(".mask-clockwise").click(function () {
            spin_n += 90;
            $(".mask-layer-imgbox img").parent("p").css({
                "transform": "rotate(" + spin_n + "deg)",
                "-moz-transform": "rotate(" + spin_n + "deg)",
                "-ms-transform": "rotate(" + spin_n + "deg)",
                "-o-transform": "rotate(" + spin_n + "deg)",
                "-webkit-transform": "rotate(" + spin_n + "deg)"
            });
        });
        $(".mask-counterclockwise").click(function () {
            spin_n -= 90;
            $(".mask-layer-imgbox img").parent("p").css({
                "transform": "rotate(" + spin_n + "deg)",
                "-moz-transform": "rotate(" + spin_n + "deg)",
                "-ms-transform": "rotate(" + spin_n + "deg)",
                "-o-transform": "rotate(" + spin_n + "deg)",
                "-webkit-transform": "rotate(" + spin_n + "deg)"
            });
        });

        //上下张
        $(".mask-up").click(function () {
            if (clickNum > 0) {
                clickNum--;
                $("#showPicImg").attr('src', urlImgSplit[clickNum]);
                img.src = urlImgSplit[clickNum];
            }
        });
        $(".mask-down").click(function () {
            if (clickNum < (urlImgSplit.length - 1)) {
                clickNum++;
                $("#showPicImg").attr('src', urlImgSplit[clickNum]);
                img.src = urlImgSplit[clickNum];
            }
        });
        //关闭
        $(".mask-close").click(function () {
            $(".mask-layer").remove();

        });
        $(".mask-layer-black").click(function () {
            $(".mask-layer").remove();
        });

    }

    return {
        showImg: showImg
    }
})();